<script lang="ts">
    import { actixGraphqlEndpoint } from "$lib/js/stores";
    import { request, gql } from "graphql-request";

    import {
        useQuery,
        useMutation,
        useQueryClient,
    } from "@sveltestack/svelte-query";
    import type { File, QuizItem, KV, Nodedge } from "$lib/ebm";
    export let file_id = "";

    let endpoint = $actixGraphqlEndpoint;
    const FILE_QUERY = gql`
        query {
            node(id: "${file_id}") {
                id
                createdAt
                updatedAt
                ... on File {
                    snapshotAt
                    fileName
                    fileMode
                    fileOwner
                    fileGroup
                    fileSize
                    title
                    description
                    content
                    status
                    folderId
                    from
                    wordens{
                      id
                      word
                    }
                }
            }
        }
    `;

    const queryFileResult = useQuery<File, { message: string }>(
        ["file", file_id],
        async () => {
            const { node } = await request(endpoint, FILE_QUERY);
            return node;
        }
    );

    const queryClient = useQueryClient();
    const mutation = useMutation<
        File,
        { message: string },
        {
            file_id: string;
            content_: string;
        }
    >(
        async ({ file_id, content_ }) => {
            const { file } = await request(
                endpoint,
                gql`
                    mutation ($fileId: ID!, $content: String!) {
                        file: updateFile(
                            fileId: $fileId
                            input: { content: $content }
                        ) {
                            id
                            snapshotAt
                            fileName
                            fileMode
                            fileOwner
                            fileGroup
                            fileSize
                            title
                            description
                            content
                            createdAt
                            updatedAt
                            status
                            folderId
                            from
                        }
                    }
                `,
                {
                    fileId: file_id,
                    content: content_,
                }
            );
            return file;
        },
        {
            onSuccess: () => {
                queryClient.invalidateQueries("file");
            },
        }
    );
</script>

<div class="px-0 py-0 w-full h-full flex flex-col">
    <p class="w-full bg-gray-400">tool bar: {file_id}</p>
    {#if $queryFileResult.isLoading}
        <p>Loading...</p>
    {:else if $queryFileResult.isError}
        <p>Error {$queryFileResult.error}</p>
    {:else}
        <textarea
            value={$queryFileResult.data.content}
            on:change={(e) =>
                $mutation.mutate({
                    file_id: file_id,
                    content_: e.target.value,
                })}
            class="w-full overflow-scroll py-4 flex-1"
        />
    {/if}
</div>
